luci-material-theme: replace margin by gap in ifacebadge

Material is a "flex" theme. Better to use "gap" in place of "margin" to
add some space between elements inside "flex" elements.

This fixes the problem specially when there are text elements inside the
"flex" and don't hurt when there are images.

Signed-off-by: Miguel Angel Mulero Martinez <[email protected]>
(cherry picked from commit 1cd615787a648e3a8fda5d8c20b38b42a62a6d16)

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 612dae52eb24d2d20bf1bf982e738543ba460dbe..a797a065d880a73603b69225ae22bffcaad176c3 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -1836,6 +1836,7 @@ body.modal-overlay-active #modal_overlay {
 
 .ifacebadge {
        display: inline-flex;
+       gap: .2rem;
        padding: .5rem .8rem;
        border-bottom: thin solid #ccc;
        background: #eee;
@@ -1852,11 +1853,6 @@ td > .ifacebadge,
 .ifacebadge > img {
        display: inline-block;
        align-self: flex-start;
-       margin: 0 .2rem;
-}
-
-.ifacebadge > img + img {
-       margin: 0 .2rem 0 0;
 }
 
 .network-status-table {